<template>
  <div class="foottab">
    <ul>
      <li>
        <slot name="nav1"></slot>
      </li>
      <li>
        <slot name="nav2"></slot>
      </li>
      <li>
        <slot name="nav3"></slot>
      </li>
      <li>
        <slot name="nav4"></slot>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {

  }
</script>


<style lang="scss" scoped>
  .foottab {
    height: 10vh;
    width: 100%;

    position: fixed;
    bottom: 0;
    background-color: rgb(203, 241, 172);

    ul {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;

      text-align: center;

      li {
        line-height: 10vh;
        height: 100%;
        flex: 1;
      }

      li:hover {
        background-color: rgb(120, 152, 241);
        color: crimson;
      }
    }
  }
</style>